<template>
  <div class="comment-panel p-3">
    <div class="flex justify-between items-center pt-3">
      <h1 class="text-lg font-bold">买家评价(10万+)</h1>
      <div class="flex items-center text-orange cursor-pointer" style="">
        <span class="text-sm font-600">超92%买家赞不绝口 </span>
        <el-icon size="14"><ArrowRight /></el-icon>
      </div>
    </div>
    <!-- tags list -->
    <div class="flex flex-wrap mt-5">
      <div
        v-for="item in tagsList"
        :key="item.id"
        class="tool-item flex items-center justify-center px-2 py-1 bg-gray-100 rounded-sm mr-2 mb-2"
        style="
          color: #b5691a;
          background-color: #fff4e8;
          border: 1px solid rgba(181, 105, 26, 0.02);
        "
      >
        <span class="text-3.5 font-600">{{ item.text }}</span>
        <span class="text-xs font-600">{{ item.number }}</span>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="mt-5 comment-list">
      <div v-for="item in commentList.slice(0, 3)" :key="item.id" class="comment-item">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <el-avatar
              :src="item.avatar"
              size="large"
              style="width: 32.5px; height: 32.5px"
            />
            <span class="text-sm font-400 ml-2 text-gray-500">{{ item.nickName }}</span>
          </div>
          <div>
            <span class="text-xs font-400 text-gray-500">{{ item.createTime }}</span>
          </div>
        </div>
        <div class="py-3.5">
          <p class="text-sm font-500 pb-3">{{ item.content }}</p>
          <div class="flex">
            <div v-for="img in item.images" :key="img" class="rounded-sm mr-2">
              <img :src="img" alt="" class="w-30 h-30 rounded-sm" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-center mt-5">
        <button
          size=""
          class="text-4 font-600 border-1 border-gray rounded-sm px-5 py-2.5"
          @click="dialogVisible = true"
        >
          全部评价
          <el-icon size="14"><ArrowRight /></el-icon>
        </button>
      </div>
    </div>

  </div>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="70%"
    :close-icon="CloseBold"
    center
    :before-close="handleClose"
    class="comment-dialog bg-gray-600 overflow-hidden"
  >
    <template #title>
      <div class="pt-5 px-5">
        <h3 class="font-600 text-lg text-left">商品评价</h3>
      </div>
    </template>

    <!-- tags list -->
    <div class="flex flex-wrap px-5">
      <div
        v-for="item in tagsList"
        :key="item.id"
        class="tool-item flex items-center justify-center px-2 py-1 bg-gray-100 rounded-sm mr-2 mb-2"
        style="
          color: #b5691a;
          background-color: #fff4e8;
          border: 1px solid rgba(181, 105, 26, 0.02);
        "
      >
        <span class="text-3.5 font-600">{{ item.text }}</span>
        <span class="text-xs font-600">{{ item.number }}</span>
      </div>
    </div>

    <div class="comment-list bg-white pl-5 mt-1.5 pt-1.5 pr-2.5">
      <el-scrollbar height="470px" @end-reached="loadMoreComment">
        <div class="pr-3.5">
          <div class="flex justify-between py-3">
            <div class="flex gap-1">
              <span class="cursor-pointer">最新</span>
              <b class="text-3 text-gray-300">|</b>
              <span class="cursor-pointer">当前商品</span>
            </div>
            <router-link to="/product/comment" class="flex items-center"
              >京东鼓励真实、有用的评价
              <el-icon size="14"><Warning /> </el-icon>
            </router-link>
          </div>
          <div class="h-2.5"></div>
          <div v-for="item in commentList" :key="item.id" class="comment-item">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <el-avatar
                  :src="item.avatar"
                  size="large"
                  style="width: 32.5px; height: 32.5px"
                />
                <span class="text-sm font-400 ml-2 text-gray-500">{{
                  item.nickName
                }}</span>
                <span
                  class="text-xs font-400 ml-2 text-brown border-brown-100 border-1 border-rounded-sm px-1"
                  >该店铺购买≥2次</span
                >
              </div>
              <div>
                <span class="text-xs font-400 text-gray-500">{{ item.createTime }}</span>
              </div>
            </div>
            <div class="pb-3.5 pl-10.5">
              <div class="flex items-center line-height-none pb-2.5 pt-1.5">
                <span class="text-red text-2.5 px-1 py-0.5 bg-red-100 rounded-sm mr-1"
                  >超赞</span
                >
                <el-rate
                  v-model="item.score"
                  disabled
                  size="small"
                  text-color="#ff9900"
                  style="height: 1.5em"
                />
                <b class="text-xs font-400 mx-1 text-gray-500">|</b>
                <span>09-04</span> <span>标准白-25 40 (250mm)</span>
              </div>
              <p class="text-sm font-500 pb-3">{{ item.content }}</p>
              <div class="flex">
                <div v-for="img in item.images" :key="img" class="rounded-sm mr-2">
                  <el-image
                    :src="img"
                    alt=""
                    class="w-30 h-30 rounded-sm"
                    :hide-on-click-modal="true"
                    :preview-src-list="[img]"
                  />
                </div>
              </div>
              <div class="pt-2.5">
                <div class="flex justify-end gap-3.5 items-center line-height-loose ">
                  <el-dropdown @command="">
                    <span class="el-dropdown-link">
                      <el-icon size="16"><MoreFilled /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="a">举报</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <span
                    class="flex items-center gap-1 cursor-pointer"
                    @click="item.showReplyInput = true"
                  >
                    <el-icon size="16"><ChatDotRound /></el-icon>回复
                  </span>
                  <span class="flex items-center gap-1 cursor-pointer">
                    <el-icon size="16"><Pointer /></el-icon>
                    有用
                  </span>
                </div>
                <div class="flex py-2 gap-2 transition" v-if="item.showReplyInput">
                  <el-input placeholder="请输入评论"></el-input>
                  <el-button type="danger">发送</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog-footer flex justify-center items-center border-rounded pb-5">
            <!--  -->
            <span class="text-3.5 font-400 text-gray-500" v-if="noMoreComment">
              没有更多了
            </span>
            <template v-else>
              <span class="text-4 font-400 text-gray-500">
                已为您过滤了参考价值不大的评价
              </span>
              <el-icon><ArrowDown /></el-icon>
            </template>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import {
  ArrowRight,
  Warning,
  CloseBold,
  ArrowDown,
  MoreFilled,
  ChatDotRound,
  Pointer,
} from "@element-plus/icons-vue";
import { tags, comments } from "@/mock/data/comment";

const tagsList = ref(tags);
const commentList = ref(structuredClone(comments));
const totalCount = ref(50);
const noMoreComment = ref(false);
// 全部评论弹窗
const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};
const loadMoreComment = () => {
  if (commentList.value.length >= totalCount.value) {
    noMoreComment.value = true;
    return;
  }
  // 模拟加载更多
  setTimeout(() => {
    commentList.value = [...commentList.value, ...comments];
  }, 1000);
};
onMounted(() => {});
</script>
<style lang="scss">
.comment-dialog {
  background-color: #f7f8fc !important;
  padding: 0;max-width: 1250px;
}
</style>
